<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12" >
        <div id="upPop" style="width: 100%;height:650px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="likesheet" style="width: 100%;height:700px;"></div>
      </el-col>
    </el-row>



  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {

  name: "TopicDashboard",

  data() {
    return {
      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,

      upPopSource: [],

    }
  },


  methods: {
    upPop() {
      var chartDom = document.getElementById('upPop');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '最受欢迎的百大up',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            restore: {show: true},
          }
        },
        series: [
          {
            name: '百大up贡献榜',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 10
            },
            data: [
              {value: this.upPopSource[0].value, name: this.upPopSource[0].name},
              {value: this.upPopSource[1].value, name: this.upPopSource[1].name},
              {value: this.upPopSource[2].value, name: this.upPopSource[2].name},
              {value: this.upPopSource[3].value, name: this.upPopSource[3].name},
              {value: this.upPopSource[4].value, name: this.upPopSource[4].name},
              {value: this.upPopSource[5].value, name: this.upPopSource[5].name},
              {value: this.upPopSource[6].value, name: this.upPopSource[6].name},
              {value: this.upPopSource[7].value, name: this.upPopSource[7].name},

            ]

          }
        ]
      }

      option && myChart.setOption(option);

    },
    likesheet() {

      var chartDom = document.getElementById('likesheet');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '文章专栏up主贡献榜',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['热度' , '点赞']
        },
        xAxis: [
          {
            type: 'category',
            data: [
              this.upPopSource[0].name,
              this.upPopSource[1].name,
              this.upPopSource[2].name,
              this.upPopSource[3].name,
              this.upPopSource[4].name,
              this.upPopSource[5].name,
              this.upPopSource[6].name,
              this.upPopSource[7].name,
            ],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '热度',
            min: 0,
            max: 200,
            interval: 20,
            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            type: 'value',
            name: '点赞',
            min: 0,
            max: 250,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '热度',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 次';
              }
            },
            data: [
              this.upPopSource[0].value,
              this.upPopSource[1].value,
              this.upPopSource[2].value,
              this.upPopSource[3].value,
              this.upPopSource[4].value,
              this.upPopSource[5].value,
              this.upPopSource[6].value,
              this.upPopSource[7].value,
            ]
          },

          {
            name: '点赞',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 赞力';
              }
            },
            data: [
              this.upPopSource[0].value,
              this.upPopSource[1].value,
              this.upPopSource[2].value,
              this.upPopSource[3].value,
              this.upPopSource[4].value,
              this.upPopSource[5].value,
              this.upPopSource[6].value,
              this.upPopSource[7].value,
            ]
          }
        ]
      };

      option && myChart.setOption(option);


    },

    upPopSpringBoot() {
      var that = this;
      this.$http.get("http://" + that.ip + ":" + that.port + "/topic/upPop")
          .then(function (response) {
            console.log(response.data);
            that.upPopSource = response.data;
          }).catch(function (err) {
        console.log(err);
      });
    },
  },
  mounted() {
    setTimeout(() => this.upPop(), 500);
    setTimeout(() => this.likesheet(), 500);
  },
  created() {
    setTimeout(() => this.upPopSpringBoot(), 100);
  }

}
</script>

<style scoped>

</style>